/*
 * @Author: Await
 * @Date: 2025-05-06 17:20:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:20:35
 * @Description: 主题图例配置组件
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Input,
  Select,
  Card,
  Tooltip,
  Switch,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface LegendConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题图例配置组件
 * 配置图例的样式
 */
const LegendConfig: React.FC<LegendConfigProps> = ({ value, onChange }) => {
  // 初始化图例配置
  const legendConfig = value.legend || {
    textStyle: {
      color: '#333',
      fontSize: 12,
    },
    itemGap: 10,
    icon: 'roundRect',
    pageIcons: {
      horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
      vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z'],
    },
    inactiveColor: '#ccc',
  };

  // 更新文字样式
  const updateTextStyle = (key: string, val: any) => {
    onChange({
      ...value,
      legend: {
        ...legendConfig,
        textStyle: {
          ...legendConfig.textStyle,
          [key]: val,
        },
      },
    });
  };

  // 更新一般配置
  const updateLegendConfig = (key: string, val: any) => {
    onChange({
      ...value,
      legend: {
        ...legendConfig,
        [key]: val,
      },
    });
  };

  // 更新页面图标
  const updatePageIcons = (orientation: 'horizontal' | 'vertical', index: number, icon: string) => {
    const newIcons = [...(legendConfig.pageIcons[orientation] || [])];
    newIcons[index] = icon;
    
    onChange({
      ...value,
      legend: {
        ...legendConfig,
        pageIcons: {
          ...legendConfig.pageIcons,
          [orientation]: newIcons,
        },
      },
    });
  };

  return (
    <div className="theme-legend-config">
      <Card title="图例样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Text>
              图例图标
              <Tooltip title="图例标记的图形">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Text>
            <Select
              value={legendConfig.icon || 'roundRect'}
              onChange={(val) => updateLegendConfig('icon', val)}
              style={{ width: '100%' }}
            >
              <Option value="circle">圆形</Option>
              <Option value="rect">矩形</Option>
              <Option value="roundRect">圆角矩形</Option>
              <Option value="triangle">三角形</Option>
              <Option value="diamond">菱形</Option>
              <Option value="pin">水滴</Option>
              <Option value="arrow">箭头</Option>
              <Option value="none">无</Option>
            </Select>
          </Col>

          <Col span={6}>
            <Text>图标大小</Text>
            <InputNumber
              value={legendConfig.itemSize || 10}
              onChange={(val) => updateLegendConfig('itemSize', val)}
              min={0}
              max={50}
              style={{ width: '100%' }}
            />
          </Col>

          <Col span={6}>
            <Text>图例间隔</Text>
            <InputNumber
              value={legendConfig.itemGap || 10}
              onChange={(val) => updateLegendConfig('itemGap', val)}
              min={0}
              max={50}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>文字样式</Title>
          </Col>
          <Col span={6}>
            <Text>颜色</Text>
            <div>
              <ColorPicker
                value={legendConfig.textStyle?.color || '#333'}
                onChange={(color) => updateTextStyle('color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={6}>
            <Text>字体大小</Text>
            <InputNumber
              value={legendConfig.textStyle?.fontSize || 12}
              onChange={(val) => updateTextStyle('fontSize', val)}
              min={8}
              max={24}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={6}>
            <Text>字体粗细</Text>
            <Select
              value={legendConfig.textStyle?.fontWeight || 'normal'}
              onChange={(val) => updateTextStyle('fontWeight', val)}
              style={{ width: '100%' }}
            >
              <Option value="normal">普通</Option>
              <Option value="bold">粗体</Option>
              <Option value="bolder">特粗</Option>
              <Option value="lighter">细体</Option>
            </Select>
          </Col>
          <Col span={6}>
            <Text>字体系列</Text>
            <Select
              value={legendConfig.textStyle?.fontFamily || 'sans-serif'}
              onChange={(val) => updateTextStyle('fontFamily', val)}
              style={{ width: '100%' }}
            >
              <Option value="sans-serif">Sans-serif</Option>
              <Option value="serif">Serif</Option>
              <Option value="monospace">Monospace</Option>
              <Option value="Arial">Arial</Option>
              <Option value="Microsoft YaHei">微软雅黑</Option>
            </Select>
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>状态颜色</Title>
          </Col>
          <Col span={8}>
            <Text>未激活颜色</Text>
            <div>
              <ColorPicker
                value={legendConfig.inactiveColor || '#ccc'}
                onChange={(color) => updateLegendConfig('inactiveColor', color.toHexString())}
                showText
              />
            </div>
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              翻页按钮
              <Tooltip title="当图例数量较多时的翻页按钮样式">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
          </Col>
          <Col span={12}>
            <Text>水平翻页</Text>
            <div style={{ marginTop: 8 }}>
              <div>前进按钮</div>
              <Input.TextArea
                value={legendConfig.pageIcons?.horizontal?.[0] || 'M0,0L12,-10L12,10z'}
                onChange={(e) => updatePageIcons('horizontal', 0, e.target.value)}
                rows={2}
                style={{ fontFamily: 'monospace' }}
              />
            </div>
            <div style={{ marginTop: 8 }}>
              <div>后退按钮</div>
              <Input.TextArea
                value={legendConfig.pageIcons?.horizontal?.[1] || 'M0,0L-12,-10L-12,10z'}
                onChange={(e) => updatePageIcons('horizontal', 1, e.target.value)}
                rows={2}
                style={{ fontFamily: 'monospace' }}
              />
            </div>
          </Col>
          <Col span={12}>
            <Text>垂直翻页</Text>
            <div style={{ marginTop: 8 }}>
              <div>上翻按钮</div>
              <Input.TextArea
                value={legendConfig.pageIcons?.vertical?.[0] || 'M0,0L20,0L10,-20z'}
                onChange={(e) => updatePageIcons('vertical', 0, e.target.value)}
                rows={2}
                style={{ fontFamily: 'monospace' }}
              />
            </div>
            <div style={{ marginTop: 8 }}>
              <div>下翻按钮</div>
              <Input.TextArea
                value={legendConfig.pageIcons?.vertical?.[1] || 'M0,0L20,0L10,20z'}
                onChange={(e) => updatePageIcons('vertical', 1, e.target.value)}
                rows={2}
                style={{ fontFamily: 'monospace' }}
              />
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default LegendConfig;